<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩色蝌蚪雨</title>

    <script src="https: //cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>

    <script src="https: //libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <style>
        ::selection {
            background-color: #ffffff;
            color: #000000
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-family: "Righteous", sans-serif;
            background-color: #06094a
        }

        h1 {
            color: #ffffff;
            text-transform: uppercase;
            font-size: 72px;
            text-align: center;
            position: fixed;
            z-index: 500;
            left: 0;
            right: 0;
            top: 50%;
            margin: -36px 0 0 0;
            padding: 0;
            line-height: 0.9;
            mix-blend-mode: exclusion
        }

        h1 span:nth-child(1) {
            color: #ff3939
        }

        h1 span:nth-child(2) {
            color: #badcff
        }

        @media screen and (max-width:568px) {
            h1 {
                margin: -64px 0 0 0
            }
        }
    </style>
</head>

<body>
    <h1><span>Moving</span><span>Snakes</span></h1>
</body>
<script>
    var vWidth = window.innerWidth; var vHeight = window.innerHeight; var cns = document.createElement("canvas"); cns.width = vWidth; cns.height = vHeight; document.body.appendChild(cns); var ctx = cns.getContext("2d"); ctx.fillStyle = "rgba(6,9,74,1)"; ctx.fillRect(0, 0, vWidth, vHeight); var particles = new Array(); var Particle = function () { this.x = Math.round(Math.random() * vWidth) - Math.round(Math.random() * vWidth); this.y = Math.round(Math.random() * vHeight) - Math.round(Math.random() * vHeight); this.hue = "#" + Math.random().toString(16).substr(2, 6); this.directionX = "left"; this.directionY = "bottom" }; for (var i = 0; i < 1000; i++) { particles[i] = new Particle() } var paint = param => { ctx.beginPath(); ctx.lineWidth = "2"; ctx.strokeStyle = particles[param].hue; ctx.moveTo(particles[param].x, particles[param].y); if (particles[param].directionY == "bottom") { particles[param].y = particles[param].y + Math.round(Math.random() * 2); if (particles[param].y > vHeight) { particles[param].directionY = "top" } } if (particles[param].directionY == "top") { particles[param].y = particles[param].y - Math.round(Math.random() * 2); if (particles[param].y < 0) { particles[param].directionY = "bottom" } } if (particles[param].directionX == "left") { particles[param].x = particles[param].x + Math.round(Math.random() * 2); if (particles[param].x > vWidth) { particles[param].directionX = "right" } } if (particles[param].directionX == "right") { particles[param].x = particles[param].x - Math.round(Math.random() * 2); if (particles[param].x < 0) { particles[param].directionX = "left" } } ctx.lineTo(particles[param].x, particles[param].y); ctx.closePath; ctx.stroke() }; var frame = () => { ctx.fillStyle = "rgba(6,9,74,.20)"; ctx.fillRect(0, 0, vWidth, vHeight); for (var j = 0; j < 1000; j++) { paint(j) } window.requestAnimationFrame(frame) }; window.requestAnimationFrame(frame);
</script>

</html>